<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en" class="fuelux">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>数据表格</title>
  <link href="<%=basePath%>css/bootstrap.css" rel="stylesheet">
  <!-- <link href="../../css/font-awesome.css" rel="stylesheet"> -->
  <link href="<%=basePath%>css/koala.css" rel="stylesheet">
  <script src="<%=basePath%>js/jquery.js" type="text/javascript"></script>
  <script src="<%=basePath%>js/bootstrap.min.js" type="text/javascript" ></script>
  <script src="<%=basePath%>js/Koala_Grid.js" type="text/javascript" ></script>
  <script src="<%=basePath%>js/Koala_Select.js" type="text/javascript" ></script>
  <script src="<%=basePath%>js/data.js" type="text/javascript" ></script>
  <script>

    $(function(){

      var buttons = [
        {content: '<button class="btn btn-primary" type="button"><span class="glyphicon glyphicon-plus"><span>创建</button>', action: 'add'},
        {content: '<button class="btn btn-success" type="button"><span class="glyphicon glyphicon-edit"></span>&nbsp;修改</button>', action: 'modify'},
        {content: '<button class="btn btn-danger" type="button"><span class="glyphicon glyphicon-remove"></span>&nbsp;删除</button>', action: 'delete'}
      ];

      $("#myGrid").grid({
        identity: 'id',
        columns: columns,
        buttons: buttons,
        querys: [{title: '角色名称', value: 'name'},{title: '角色描述', value: 'roleDesc'}],
        isUserLocalData:true,			//如果为false，则发送ajax请求到url端，获取数据，否则，则视为获取静态数据
        url:"<%=basePath%>js/data.js",
        localData:staticData
        ,isShowIndexCol:true
        //,lockWidth: true
      }).on({

        'add': function(){
          alert("add action");
        },
        'modify': function(event, data){
          alert("modify action");
        },
        'delete': function(event, data){
          alert('delete action');
        }
      });

    })
  </script>
</head>
<body>
<div id="myGrid"></div>
</body>
</html>

